<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../css/home/benefitPlay.css" />

	</head>

	<body>
		<div class="mui-content">
			<div class="ThisPeriod_game_box" style="margin-top: 10px;">
				<a href="#"><img src="../../img/cbd.jpg" /></a>
				<p class="mui-ellipsis">本期游戏：跳舞在线Dancing line跳舞在线Dancing line跳舞在线Dancing line跳舞在线Dancing line</p>
			</div>

			<!--游戏推荐  猜你喜欢 我的特权 -->
			<div class="recommend_love_mine_box">
				<div class="recommend" style="">
					<a href="#">
						<img src="../../img/jiFenShangCheng.png" />
						<p>积分商城</p>
					</a>
				</div>
				<div class="love_mine">
					<div class="love_mine_inner_box">
						<div class="love" style="">
							<a href="#">
								<img src="../../img/game1.png" />
								<p>游戏推荐</p>
							</a>
						</div>
						<div class="mine" style="">
							<a href="#">
								<img src="../../img/huiYuanTeQuan.png" />
								<p>我的推荐</p>
							</a>
						</div>
						<div style="clear: both;"></div>
					</div>
				</div>
				<div style="clear: both;"></div>
			</div>

			<!--附近活动-->
			<div class="nearby_activ_out_box">
				<p style="text-align: center;font-size: 18px;color: #333;">附近活动</p>
				<!--<div class="nearby_activ_bg">
					<img src="img/be1.jpg" />
					<div class="nearby_activ_mask"></div>
					<div class="nearby_activ_content">
						<p class="mui-ellipsis">Who is lying?”悠悠茶咖第一届狼人杀</p>
						<ul class="mui-table-view">
							<li class="mui-row">
								<p class="mui-pull-left title">活动地点：</p>
								<p class="mui-ellipsis mui-pull-left address">中华路256号悠悠茶咖中华路256号 中华路256号悠悠茶咖中华路256号中华路256号悠悠茶咖中华路256号</p>
							</li>
							<li class="mui-row">
								<p class="mui-pull-left title">报名方式：</p>
								<p class="mui-ellipsis mui-pull-left address">现场报名(门票30)</p>
							</li>
							<li class="mui-row">
								<p class="mui-pull-left title">活动时间：</p>
								<p class="mui-ellipsis mui-pull-left address">2018-7-23 15：00-19：00</p>
							</li>
						</ul>
					</div>
				</div>-->
				<!--<div class="nearby_activ_bg">
					<img src="img/be5.jpg" />
					<div class="nearby_activ_mask"></div>
					<div class="nearby_activ_content">
						<p class="mui-ellipsis">炉石传说：谁才是天选之人</p>
						<ul class="mui-table-view">
							<li class="mui-row">
								<p class="mui-pull-left title">活动地点：</p>
								<p class="mui-ellipsis mui-pull-left address">中华路256号悠悠茶咖</p>
							</li>
							<li class="mui-row">
								<p class="mui-pull-left title">报名方式：</p>
								<p class="mui-ellipsis mui-pull-left address">现场报名(门票30)</p>
							</li>
							<li class="mui-row">
								<p class="mui-pull-left title">活动时间：</p>
								<p class="mui-ellipsis mui-pull-left address">2018-7-23 15：00-19：00</p>
							</li>
						</ul>
					</div>
				</div>-->
			</div>

			<!--看点啥-->
			<div class="seeWhat">
				<!--看点啥-->
				<p class="seeWhat_title" style="font-size: 18px;color: #333;">看点什么</p>
				<div class="list_card" id="list_card">
					<ul class="mui-table-view">
						<!--<li class="mui-table-view-cell mui-media">
							<img class="mui-media-object mui-pull-right" src="img/benefit3.jpg" />
							<div class="mui-media-body">
								<div class="gameTile mui-ellipsis-2">
									“Who is lying?”悠悠茶咖第一届狼人杀
								</div>
								<div class="gamebtn_viewTime">
									<button class='mui-pull-left'>炉石传说</button>
									<p class='mui-ellipsis mui-pull-right'>1.2k次查看</p>
								</div>
							</div>
						</li>-->

					</ul>
				</div>
			</div>
			<div class="viewMore" style="height: 100px;">
				<button class="mui-btn" style="color: #333;font-size: 16px;">查看更多</button>
			</div>
		</div>
	</body>

	<script type="text/javascript" src="../../js/jquery.min.js"></script>
	<script src="../../js/mui.min.js"></script>
	<!--<script src="../../js/home/benefitPlay.js" type="text/javascript" charset="utf-8"></script>-->

	<script type="text/html" id="nearbyActive">
		<div class="nearby_activ_bg">
			<img src="{{act_bgPic}}" />
			<div class="nearby_activ_mask"></div>
			<div class="nearby_activ_content">
				<p class="mui-ellipsis">游戏标题</p>
				<ul class="mui-table-view">
					<li class="mui-row">
						<p class="mui-pull-left title">活动地点：</p>
						<p class="mui-ellipsis mui-pull-left address">{{act_address}}</p>
					</li>
					<li class="mui-row">
						<p class="mui-pull-left title">报名方式：</p>
						<p class="mui-ellipsis mui-pull-left address">{{act_sign_up}}</p>
					</li>
					<li class="mui-row">
						<p class="mui-pull-left title">活动时间：</p>
						<p class="mui-ellipsis mui-pull-left address">{{act_time}}</p>
					</li>
				</ul>
			</div>
		</div>
	</script>
	<script type="text/html" id="seeWhat">
		<li class="mui-table-view-cell mui-media">
			<img class="mui-media-object mui-pull-right" src="{{pic}}" />
			<div class="mui-media-body">
				<div class="gameTile mui-ellipsis-2">
					{{title}}
				</div>
				<div class="gamebtn_viewTime">
					<button class='mui-pull-left'>{{name}}</button>
					<p class='mui-ellipsis mui-pull-right'>{{time}}</p>
				</div>
			</div>
		</li>
	</script>
	<script>
		mui.init();
		var main = null;
		mui.plusReady(function() {
			
			main = plus.webview.currentWebview().opener();
			//点击“看点什么”出发事件
			var list_card = document.getElementById('list_card');
			var oLi = list_card.getElementsByTagName('li');
			/*alert(oLi.length);*/
			for(var i = 0; i < oLi.length; i++) {
				oLi[i].index = i;
				oLi[i].onclick = function() {
					mui.openWindow({
						url:"index-article.html",
						id:"index-article.html",
						extras:{
							name1:"benefit_list_id"
						},
						weiting:{
							autoShow:true
						}
					})
				}
			}
			//点击“看点什么”出发事件结束
		})
		mui.getJSON('../../json/benefitPlay.json', '', function(data) {
			var nearByAtv = [];
			if(data.nearByAtv) {
				nearByAtv = data.nearByAtv;
				var nearAct_bgPic = "";
				var nearAct_title = "";
				var nearAct_address = "";
				var nearAct_sign_up = "";
				var nearAct_time = "";
				var nearByList = ""; //定义附近活动变量
				for(var i = 0; i < nearByAtv.length; i++) {
					nearAct_bgPic = nearByAtv[i].nearImg;
					nearAct_title = nearByAtv[i].atv_title;
					alert("nearAct_title----:" + nearAct_title);
					nearAct_address = nearByAtv[i].atv_address;
					nearAct_sign_up = nearByAtv[i].atv_signup;
					nearAct_time = nearByAtv[i].atv_time;
					console.log("nearAct_bgPic=:" + nearAct_bgPic);
					console.log("+++:" + nearAct_title);
					nearByList += del_html_tags($("#nearbyActive").html(), "{{act_bgPic}}", nearAct_bgPic);
					nearByList = del_html_tags(nearByList, "{{act_time}}", nearAct_time);
					nearByList = del_html_tags(nearByList, "{{act_address}}", nearAct_address);
					nearByList = del_html_tags(nearByList, "{{act_sign_up}}", nearAct_sign_up);
					nearByList = del_html_tags(nearByList, "游戏标题", nearAct_title);

				}
				$('.nearby_activ_out_box p').after(nearByList);
			}
			if(data.seeWhat) {
				var seeWhat = data.seeWhat;
				var thing_img = "";
				var thing_title = "";
				var thingType_btn = "";
				var thing_viewTime = "";
				var seeWhatList = "";
				for(var i = 0; i < seeWhat.length; i++) {
					thing_img = seeWhat[i].thing_img;
					thing_title = seeWhat[i].thing_title;
					thingType_btn = seeWhat[i].thingType_btn;
					thing_viewTime = seeWhat[i].thing_viewTime;
					seeWhatList += del_html_tags($("#seeWhat").html(), "{{pic}}", thing_img);
					seeWhatList = del_html_tags(seeWhatList, "{{title}}", thing_title);
					seeWhatList = del_html_tags(seeWhatList, "{{name}}", thingType_btn);
					seeWhatList = del_html_tags(seeWhatList, "{{time}}", thing_viewTime);
				}
				$("#list_card ul").append(seeWhatList);
			}
		})

		//自定义一个方法批量替换制定的字符 
		function del_html_tags(str, reallyDo, replaceWith) {
			var e = new RegExp(reallyDo, "g"); //参数 reallyDo 是一个字符串，指定了正则表达式的模式或其他正则表达式,参数 "g" 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配
			words = str.replace(e, replaceWith); //str里的e换做replaceWith
			return words;
		}
		
		//点击banner图
		$(".mui-content").on('tap',".ThisPeriod_game_box",function(){
			mui.openWindow({
				url:"index-article.html",
				id:"index-article.html",
				extras:{
					name:"benegitPlay_Id"
				},
				weiting:{
					autoShow:true,
				}
			})
		})
	</script>

</html>